<template>
  <div>
    <el-card>
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="68px"
      >
        <!-- <el-form-item label="开始年份" prop="oneYear">
          <el-date-picker
            type="year"
            v-model="queryParams.oneYear"
            placeholder="选择开始年份"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束年份" prop="twoYear">
          <el-date-picker
            type="year"
            v-model="queryParams.twoYear"
            placeholder="选择结束年份"
          >
          </el-date-picker>
        </el-form-item> -->
        <el-form-item label="" prop="productSeason">
          <el-select
            v-model="queryParams.productSeason"
            placeholder="请选择商品-季节"
            clearable
            style="width: 150px"
          >
            <el-option
              v-for="dict in dict.type.sys_product_jijie"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="firstLevelColumn">
          <el-select
            v-model="queryParams.firstLevelColumn"
            placeholder="请选择一级类目"
            clearable
            style="width: 150px"
          >
            <el-option
              v-for="dict in dict.type.sys_product_pl"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="" prop="threeLevelColumn">
          <el-select
            v-model="queryParams.threeLevelColumn"
            placeholder="请选择三级类目"
            clearable
            filterable
            style="width: 150px"
          >
            <el-option
              v-for="dict in dict.type.sys_product_cycle"
              :key="dict.label"
              :label="dict.label"
              :value="dict.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="productName">
          <el-input
            v-model="queryParams.productName"
            placeholder="商品名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="" prop="item">
          <el-select
            v-model="queryParams.item"
            placeholder="大款号"
            clearable
            style="width: 150px"
            filterable
            remote
            :remote-method="getDatas"
          >
            <el-option
              v-for="item in options"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
          <!-- <el-input v-model="queryParams.item" placeholder="大款号" clearable /> -->
        </el-form-item>
        <el-form-item label="" prop="spu">
          <el-input
            v-model="queryParams.spu"
            placeholder="款式编码"
            clearable
          />
        </el-form-item>
        <el-form-item label="" prop="colorProperty">
          <el-input
            v-model="queryParams.colorProperty"
            placeholder="颜色"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="getList"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>

    <el-card>
      <el-table
        ref="tableData"
        :data="tableData"
        row-key="sku"
        border
        stripe
        highlight-current-row
        style="width: 100%"
        :height="650"
        @row-click="handleRowClick"
        @expand-change="expandChange"
      >
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-table
              :data="scope.row.times"
              size="mini"
              style="width: 95%; margin-left: 3%"
              :header-cell-style="tableHeaderColor"
            >
              <el-table-column
                label="年份"
                prop="year"
                :resizable="false"
              ></el-table-column>
              <el-table-column
                label="1月"
                prop="saleQuantityJan"
                :resizable="false"
              ></el-table-column>
              <el-table-column
                label="2月"
                prop="saleQuantityFeb"
                :resizable="false"
              ></el-table-column>
              <el-table-column
                label="3月"
                prop="saleQuantityMar"
                :resizable="false"
              ></el-table-column>
              <el-table-column
                label="4月"
                prop="saleQuantityApr"
                :resizable="false"
              ></el-table-column>
              <el-table-column
                label="5月"
                prop="saleQuantityMay"
                :resizable="false"
              ></el-table-column>
              <el-table-column
                label="6月"
                prop="saleQuantityJun"
                :resizable="false"
              ></el-table-column>

              <el-table-column
                label="7月"
                prop="saleQuantityJul"
                :resizable="false"
              ></el-table-column>
              <el-table-column
                label="8月"
                prop="saleQuantityAug"
                :resizable="false"
              ></el-table-column>
              <el-table-column
                label="9月"
                prop="saleQuantitySep"
                :resizable="false"
              ></el-table-column>
              <el-table-column
                label="10月"
                prop="saleQuantityOct"
                :resizable="false"
              ></el-table-column>
              <el-table-column
                label="11月"
                prop="saleQuantityNov"
                :resizable="false"
              ></el-table-column>

              <el-table-column
                label="12月"
                prop="saleQuantityDec"
                :resizable="false"
              ></el-table-column>
            </el-table>
            <!-- <el-col :span="24" class="toolbar">
            <el-pagination
              style="float: right"
              :total="scope.row.detailTotal"
              :current-page="detailCurrentPage"
              :page-sizes="[5, 10, 20, 30]"
              :page-size="detailPageSize"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleDetailSizeChange"
              @current-change="handleDetailCurrentChange"
            />
          </el-col> -->
          </template>
        </el-table-column>
        <!-- <el-table-column fixed type="selection" width="55" align="center" /> -->
        <el-table-column
          label="季节"
          prop="productSeason"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          label="上新时间"
          width="100"
          prop="newTime"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          label="一级品类"
          prop="firstLevelColumn"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          width="100"
          label="三级品类"
          prop="threeLevelColumn"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          label="商品名称"
          prop="productName"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          width="100"
          label="大款号"
          prop="item"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          width="100"
          label="款式编码"
          prop="spu"
          :resizable="false"
        ></el-table-column>

        <el-table-column
          label="颜色"
          prop="colorProperty"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          label="尺码"
          prop="proSize"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          width="120"
          label="前三月月均销量"
          prop="avgSalesLastThreeMonths"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          width="130"
          label="库存(取可用库存)"
          prop="endingInventory"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          width="120"
          label="库存金额(万)"
          prop="inventoryAmount"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          width="120"
          label="库存金额占比"
          prop="inventoryAmountRatio"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          label="可用月数"
          prop="availableMonths"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          label="采购在途"
          prop="intransitInventory"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          width="120"
          label="总库存+在途"
          prop="totalInventory"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          label="可用月份(含在途)"
          prop="availableDays"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          label="库存周期"
          prop="inventoryCycle"
          :resizable="false"
        ></el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.thisPageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

  <script>
import * as echarts from "echarts/lib/echarts.js";
import {
  listBiSkuSaleMonthly,
  getBiSkuSaleMonthly,
  delBiSkuSaleMonthly,
  addBiSkuSaleMonthly,
  updateBiSkuSaleMonthly,
  selectPurInvMonitor,
  selectSkuMonthly,
} from "@/api/sku/BiSkuSaleMonthly";
import moment from "moment";
import {
  itemSaleData,
  skcByItemSaleList,
  queryContentByKey,
  selectItemStatistics,
  skuBySkcSaleList,
  comparisonStatistics,
} from "@/api/sku/sku";
export default {
  dicts: [
    "sys_product_age",
    "sys_product_item",
    "sys_product_secondary",
    "sys_product_cycle",
    "sys_product_pl",
    "sys_product_jijie",
  ],
  data() {
    return {
      options: [], // 选项，从后端传递过来
      //模糊匹配
      spuList: [],
      ColorLike: [],
      height: 630,
      rowHeight: 50,
      tableData: [],
      // tableData: Array.from({ length: 5 }, (_, idx) => ({
      //   id: idx + 1,
      //   date: "2016-05-03",
      //   name: "王小虎",
      //   province: "上海",
      //   city: "普陀区",
      //   address: "上海市普陀区金沙江路 1518 弄",
      //   zip: 200333,
      // })),
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        thisPageSize: 10,
        itemType: "sku",
        // oneYear: (new Date().getFullYear() - 2).toString(),
        // twoYear: moment(new Date()).format("YYYY"),
        // groupLabel: "一级",
      },
    };
  },

  created() {
    // console.log(JSON.stringify(this.tableData));
    this.getList();
  },
  methods: {
    /* 获取货号列表 */
    getDatas(key) {
      console.log(JSON.stringify(key));
      // this.loading = true;
      // return
      queryContentByKey({ keyWord: key }).then((res) => {
        // this.loading = false;
        this.options = res.data;
        console.log(JSON.stringify(this.options));
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {};
      this.queryParams.pageNum = 1;
      this.queryParams.thisPageSize = 10;
      this.queryParams.itemType = "sku";
      this.getList();
    },
    getList() {
      selectPurInvMonitor(this.queryParams).then((response) => {
        this.tableData = response.data ? response.data : [];
        this.total = response.totalCount;
      });
    },
    /** 点击主表格行，获取子表格明细 */
    expandChange(row) {
      // 行为选中行
      this.$refs.tableData.setCurrentRow(row);
      console.log(JSON.stringify(row));
      var obj = {
        inputValue: row.sku,
        itemType: "sku",
        yearList: [
          (new Date().getFullYear() - 2).toString(),
          (new Date().getFullYear() - 1).toString(),
          new Date().getFullYear().toString(),
        ],
      };
      selectSkuMonthly(obj).then((response) => {
        this.$set(row, "times", response);
      });
      // this.detailListLoading = true
      // SOPTCHECKRECORDAPI.queryEquipSpotCheckRecordDetailList(obj, this.detailCurrentPage, this.detailPageSize).then(
      //   (res) => {
      //     this.detailListLoading = false
      //     this.$set(row, 'tableDetailData', res.data.records)
      //     this.$set(row, 'detailTotal', res.data.total)
      //   }
      // )
    },
    /** 导出按钮操作 */
    handleExport() {
      let obj = {
        itemType: "sku",
        yearList: [
          (new Date().getFullYear() - 2).toString(),
          (new Date().getFullYear() - 1).toString(),
          new Date().getFullYear().toString(),
        ],
      };
      this.download(
        "sale/BiSkuSaleMonthly/selectPurInvMonitorExport",
        {
          ...obj,
        },
        `sku_${new Date().getTime()}.xlsx`
      );
    },
    // 点击主表行展开明细
    handleRowClick(row, event, column) {
      // tableData为主表table的ref属性值
      this.$refs.tableData.toggleRowExpansion(row);
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return "color: #515a6e;background:#f5f7fa !important;";
    },
  },
};
</script>
/** -级 */
@Excel(name =“一级")
private string firstLevelcolumn;
/** 三级 */
@Excel(name =“三级")
private string threeLevelcolumn;
/** 李节 */
@xcel(name =“季节")
private String productSeason;
/** 颢粒度值 */
//@Excel(name ="颗粒度值”)
private string sku;
/** 商品名称 */
0Excel(name =“商品名称")private String productName;
/** item(款-大方向)*/
@Excel(name =“大款号")
private string item;
/** spu(款-含面料)*/@Excel(name =“款式编码")private string spu;
/** 上架时间 */@JsonFormat(pattern ="yyyy-MM-dd")@Excel(name ="上架时间",width = 30,dateFormat = "yyyy-MM-dd")private Date newTime;

/** 颜色 */
@Excel(name ="颜色")
private string colorProperty;
/** 尺码 */
@Excel(name ="尺码")
private string proSize;
// 前三月月均销量
0Excel(name =“前三月月均销量")
private Double avgSalesLastThreeMonths;
1 库存(取可用库存)
0Excel(name =“库存")
private Integer endingInventory;
/ 库存金额- 万元
0Excel(name =“库存金额-万元")
private Double inventoryAmount;
// 库存金额占比(此属性可能需要一个基准值来计算，例如总库存金额)/!假设这里是一个百分比，使用double类型存储
@Excel(name ="库存金额占比")
private Double inventoryAmountRati0;
/ 可用月数
@Excel(name =“可用月数”)
private Double availableMonths;
1 采购在途
0Excel(name =“采购在途")
private Integer intransitInventory;
11 总库存+在途
@Excel(name ="总库存+在途")
private Integer totalInventory;

/ 可用天数
@Excel(name ="可用天数")private Double availableDays;
// 库存周期
@Excel(name =“库存周期")private Integer inventoryCycle;

1月	2月	3月	4月	5月	6月	7月	8月	9月	10月	11月	12月

@Excel(name ="一级")private string firstLevelColumn;
/** 三级 */@Excel(name =“三级")private string threeLevelColumn;
/** 李节 */@Excel(name =“季节")private String productSeason;
/** 颗粒度值 */
//@Excel(name ="颗粒度值”)
private string sku;
/** 颜色 */
@Excel(name =“颜色")
private string colorProperty;
/** 尺码 */@Excel(name ="尺码")private string proSize;
/** 商品名称 */@Excel(name ="商品名称")private string productName;
/** item(款-大方向)*/@Excel(name =“大款号")private string item;
可筛选字段
/** spu(款-含面料)*/@Excel(name ="款式编码")private string spu;

/** 可用月数范围 */
private Integer startAvailableMonths;private Integer endAvailableMonths;
/** (含采购在途)可用月数范围 */
private Integer startAvailableMonthsAll;private Integer endAvailableMonthsAll;